import React from 'react';
import bannerImg from '@/assets/image/doc-banner.png';
import { HeaderLink } from '../components/HeaderLink';
import { Image } from 'antd';
import consoleImg from '@/assets/image/screenshot/console-panel.png';
import networkImg from '@/assets/image/screenshot/network-panel.png';
import pageImg from '@/assets/image/screenshot/page-panel.png';
import storageImg from '@/assets/image/screenshot/storage-panel.png';
import systemImg from '@/assets/image/screenshot/system-panel.png';

export const githubUrl = import.meta.env.VITE_GITHUB_REPO;

<img src={bannerImg} style={{ width: '100%' }} />

<HeaderLink level={2} slug="introduction" children="介绍" />

<b>PageSpy</b> 是一款用来调试远程 Web 项目的工具。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。

<HeaderLink level={2} slug="when-to-use" children="何时使用？" />

<u>*任何无法在本地使用控制台调试的场景，都是 **PageSpy** 可以大显身手的时候*</u>
！一起来看下面的几个场景案例：

- **本地调试 H5、Webview 应用**：以往有些产品提供了可以在 H5 上查看信息的面板，但移动端屏幕太小操作不便、显示不友好，以及信息被截断等问题；
- **远程办公、跨地区协同**：传统沟通方式如邮件、电话、视频会议等，沟通效率不高、故障信息不全面，容易误解误判；
- **用户终端上出现白屏问题**：传统定位问题的方式包括数据监控、日志分析等，这些方式依赖排障人员要理解业务需求场景、技术实现；

<HeaderLink level={2} slug="how-to-use" children="如何使用？" />

为了数据安全和方便您的使用，我们提供完整的、开箱即用的<a href={`${githubUrl}#如何使用`} target="\_blank">部署方案</a>。

本地化部署完成后，顶部会出现 `接入SDK` 菜单，点击菜单查看如何在业务项目中配置并集成。

<HeaderLink level={2} slug="feature-overview" children="功能概览" />

- Console 面板: 显示 `console.<log | info | warn | error>` 日志信息，可以执行代码；

<Image width="90%" style={{ margin: '0 auto' }} src={consoleImg} />

- Network 面板: 显示 `fetch` | `XMLHttpRequest` | `navigator.sendBeacon` 的网络请求；

<Image width="90%" style={{ margin: '0 auto' }} src={networkImg} />

- Element 面板: 显示当前页面，查看 HTML 节点树；

<Image width="90%" style={{ margin: '0 auto' }} src={pageImg} />

- Storage 面板: 查看 `localStorage` | `sessionStorage` | `cookie` | `indexedDB` 缓存数据；

<Image width="90%" style={{ margin: '0 auto' }} src={storageImg} />

- Systems 面板: 显示 userAgent 信息，查看 api 兼容性。

<Image width="90%" style={{ margin: '0 auto' }} src={systemImg} />

除此之外，当有新的数据或者数据发生变化的时候会实时的收到通知。

<p style={{ marginTop: 28 }}>
  欢迎在 <a href={githubUrl}>GitHub</a> 上提交 PR 或 issue。
</p>
